<template>
    <div class="user_main">
        <div class="safelist-search-container mb-16">
            <a-row class="search-row">
                <a-col :span="6" class="mr-8">
                    <a-input v-model:value="state.searchData.likeUserName" placeholder="请输入用户名" />
                </a-col>
                <a-col :span="5" class="mr-16">
                    <a-select v-model:value="state.searchData.role_id" show-search placeholder="请选择角色"
                        style="width: 100%;" optionFilterProp="label">
                        <a-select-option :value="item.id" :label="item.role_name"
                            v-for="(item, index) in state.roleList" :key="index">{{ item.name }}</a-select-option>
                    </a-select>
                </a-col>
                <a-col :span="6">
                    <a-button type="primary" class="mr-8" @click="handleSearch">搜索</a-button>
                    <a-button type="primary" ghost @click="handleEmpty">重置</a-button>
                </a-col>
            </a-row>
            <a-row>
                <a-button type="primary" class="nmc-add-btn-primary" @click="handleAdd">新增</a-button>
            </a-row>
        </div>
        <div class="safelist-table-container">
            <a-table :columns="tableProps.columns" :data-source="tableProps.dataSource"
                :pagination="tableProps.pagination" :scroll="{ y: 'calc(100vh - 320px)' }">
                <template #bodyCell="{ column, text, record }">
                    <div v-if="column.key === 'action'" class="action_box">
                        <span @click="editUser(record)">编辑</span>
                        <span @click="resetPwd(record)">重置密码</span>
                        <!-- <span class="delete_btn" @click="deleteUser(record)">删除</span> -->
                    </div>

                    <div v-if="column.dataIndex === 'isActive'" :class="text === '1' ? 'show' : 'none'">
                        {{ record.isActive ? '正常' : '停用' }}
                    </div>
                    <div v-if="column.dataIndex === 'roleId'">
                        {{ record.role ? record.role.name : '' }}
                    </div>
                </template>
            </a-table>
        </div>
    </div>
    <addUser ref="addUser" :roleList="state.roleList" @success="init"></addUser>
    <resetPwd ref="resetPwdRef" @success="init"></resetPwd>
</template>

<script>
import { onMounted, reactive, ref } from 'vue'

import { sysUserQueryPage, sysRoleQueryPage } from '@/service/api'
import addUser from './addUser.vue'
import resetPwd from './resetPwd.vue'
import { message } from "ant-design-vue";
export default {
    components: { addUser, resetPwd },
    setup() {
        const addUser = ref()
        const resetPwdRef = ref()
        const tableProps = ref({
            columns: [{
                title: '序号',
                dataIndex: 'index',
                width: 70,
                customRender: ({ text, record, index, column }) => {
                    // return `${index + 1}`
                    return (tableProps.value.pagination.current - 1) * tableProps.value.pagination.pageSize + Number(index) + 1;
                }
            },
            {
                title: '用户名',
                dataIndex: 'nickName'
            },
            {
                title: '人员姓名',
                dataIndex: 'realName'
            },
            {
                title: '角色',
                dataIndex: 'roleId'
            },
            {
                title: '用户状态',
                dataIndex: 'isActive',
                // render: (text) => mapDictTypeToName(dictType, 'menuType', text, 'code')
            },
            {
                title: '更新时间',
                dataIndex: 'updateTime'
            },
            {
                title: '备注信息',
                dataIndex: 'comment'
            },
            {
                title: '操作',
                key: 'action'
            }
            ],
            dataSource: [], //列表数据
            pagination: {
                current: 1,//当前页数
                pageSize: 20,//每页条数
                total: 0,
                showSizeChanger: true,
                showTotal: (total) => `共有${total}条数据`,
                onChange: (current, pageSize) => {
                    tableProps.value.pagination.current = current;
                    tableProps.value.pagination.pageSize = pageSize;
                    init();
                }
            }
        })
        const state = reactive({
            searchData: {
                likeUserName: '',
                // role_id: '',
            },//搜索数据
            roleList: [],   //角色列表
            // tableHeight: 0
        })
        onMounted(() => {
            init()
            getRoleList()
            // state.tableHeight = document.getElementsByClassName('safelist-table-container')[0].offsetHeight - 80
        })
        //获取用户列表数据
        const init = () => {
            let params = {
                ...state.searchData,
                pageNum: tableProps.value.pagination.current,
                pageSize: tableProps.value.pagination.pageSize,
            }
            sysUserQueryPage(params).then(res => {
                if (res.status == "000_0000_0000") {
                    console.log(res, 'res.data.result9999');
                    tableProps.value.dataSource = res.result.list;
                    tableProps.value.pagination.total = Number(res.result.total);
                }
            })
        }
        // 获取角色列表
        const getRoleList = () => {
            let params = {
                likeName: '',
                pageNum: 1,
                pageSize: 999,
            }
            sysRoleQueryPage(params).then(res => {
                if (res.result) {
                    state.roleList = res.result.list;

                }
            })
        }
        //搜索
        const handleSearch = () => {
            tableProps.value.pagination.current = 1;
            init()
        }
        //重置
        const handleEmpty = () => {
            state.searchData = {
                likeUserName: null,
                // role_id: null,
            }
            init()
        }
        // 新增用户
        const handleAdd = () => {
            addUser.value.showModal({
                title: '新增用户'
            })
        }
        // 编辑用户
        const editUser = (record) => {
            addUser.value.showModal({
                title: '编辑用户',
                ...record
            })
            // userDetail({id: record.id}).then(res=>{
            //     if(res.result) {
            //         addUser.value.showModal({
            //             title: '编辑用户',
            //             ...res.data
            //         })
            //     }else{
            //         message.warning(res.messages)
            //     }
            // })

        }
        // 重置密码
        const resetPwd = (record) => {
            console.log(record, 'ss')
            resetPwdRef.value.showModal({
                title: '重置密码',
                ...record
            })
        }
        // 删除用户
        // const deleteUser = (record) => {
        //     logicflowSync({
        //         chainId: 'com.ggzn.sysmgr.user.del',
        //         json: record.id
        //     }).then(res => {
        //         if (res.status == "000_0000_0000") {
        //             message.success('删除成功！')
        //             init()
        //         }
        //     })

        // }
        return {
            init,
            state,
            tableProps,
            handleSearch,
            handleEmpty,
            editUser,
            resetPwd,
            resetPwdRef,
            // deleteUser,
            addUser,
            handleAdd
        }
    },
}
</script>
<style lang="less" scoped>
.user_main {
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.safelist-table-container {
    height: calc(100% - 48px);
    overflow: hidden;

    .action_box {
        display: flex;
        font-size: 14px;
        color: #00CCCC;

        span {
            cursor: pointer;
            margin-right: 8px;
        }

        .delete_btn {
            color: rgba(255, 47, 0, 1);
        }
    }

    .show {
        width: 40px;
        height: 18px;
        background: #0E3E6C;
        border-radius: 4px;
        color: rgba(36, 195, 142, 1);
        line-height: 18px;
        text-align: center;
    }

    .none {
        width: 40px;
        height: 18px;
        background: rgba(255, 255, 255, 0.14);
        border-radius: 4px;
        line-height: 18px;
        text-align: center;
        color: rgba(255, 255, 255, 0.25);
    }
}
</style>
